<template>
  <div>
    <div style="padding-bottom: 20px; color: #0000FF;" @click="closePage"><主图</div>
    <div class="banner_edit">
      <div class="page_top padding_20">发布主图</div>
      <div class="page_content padding_20">
        <div class="page_content_tit">
          <span>封面</span><span class="must_icon">必填</span>
          <span style="font-size: 14px;color: #ccc;">1200X600PX的图像最佳，大小请不要超过10M</span>
        </div>
        <div style="display: flex;">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="beforeAvatarUpload"
            :auto-upload="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>

          <!-- <div style="display: flex;align-items: flex-end;">
						<el-button style="margin-left: 10px;" type="defoult" @click="submitUpload">上传</el-button>
					</div> -->
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>标题</span><span class="must_icon">必填</span></div>
          <div class="ad_item">
            <div style="display: flex;flex: 1;align-items: center;border: 1px solid #ccc;">
              <el-input v-model="title" placeholder="请输入标题" />
            </div>
          </div>
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>链接地址</span><span class="must_icon">必填</span></div>
          <!-- <div class="ad_item">
						<el-radio v-model="radio" label="1">无</el-radio>
					</div> -->
          <div class="ad_item">
            <el-radio v-model="radio" :label="2">
              <!-- <el-dropdown @command="informationClick">
                <el-button style="border-color: #409EFF;color: #409EFF;">
                  关联资讯<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in informations" :command="item">{{ item.title }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
              <el-select v-model="chooseinforma" :disabled="radio!==2" filterable placeholder="尚未关联资讯">
                <el-option
                  v-for="item in informations"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-radio>
            <!-- <div style="display: flex;flex: 1;align-items: center;border: 1px solid #ccc;">
              <span style="color: #ccc;text-indent: 10px;">{{ chooseinforma? chooseinforma.title :'尚未关联资讯' }}</span>
            </div> -->
          </div>
          <div class="ad_item">
            <el-radio v-model="radio" :label="3">
              <!-- <el-dropdown @command="goodsClick">
                <el-button style="border-color: #409EFF;color: #409EFF;">
                  关联商品<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in goods" :command="item">{{ item.title }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
              <el-select v-model="choosegoods" :disabled="radio!==3" filterable placeholder="尚未关联商品">
                <el-option
                  v-for="item in goods"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-radio>
            <!-- <div style="display: flex;flex: 1;align-items: center;border: 1px solid #ccc;">
              <span style="color: #ccc;text-indent: 10px;">{{ choosegoods? choosegoods.title :'尚未关联商品' }}</span>
            </div> -->
          </div>
          <div class="ad_item">
            <el-radio v-model="radio" :label="4" style="width: 141px;">
              <el-button style="border:none;color: #ccc;">
                自定义链接
              </el-button>
            </el-radio>
            <div style="display: flex;flex: 1;align-items: center;border: 1px solid #ccc;">
              <!-- <span style="color: #ccc;text-indent: 10px;">尚未设置自定义链接</span> -->
              <el-input v-model="link" :disabled="radio!==4" placeholder="尚未设置自定义链接" />
            </div>
          </div>
        </div>

      </div>
      <div class="page_foot padding_20">
        <div>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="closePage">取消</el-button>
          <el-button type="primary" @click="bannerAdd">发布</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getinformationList, getcommodityList, bannerAdd, bannerEdit } from '@/api/banner'
export default {
  props: ['editdata'],
  data() {
    return {
      imageUrl: '',
      imgFile: '',
      radio: 2,
      informations: '',
      goods: '',
      chooseinforma: '',
      choosegoods: '',
      link: '',
      title: ''
    }
  },
  created() {
    console.log(this.editdata)
    if (this.editdata) {
      this.imageUrl = this.editdata.img
      this.chooseinforma = this.editdata.informationid === '0' ? '' : this.editdata.informationid
      this.choosegoods = this.editdata.commodityid === '0' ? '' : this.editdata.commodityid
      this.link = this.editdata.link
      this.title = this.editdata.title
      this.radio = this.editdata.informationid && this.editdata.informationid !== '0' ? 2 : this.editdata.commodityid && this.editdata.commodityid !== '0' ? 3 : 4
    }
    this.getinformationList()
    this.getcommodityList()
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },

    closePage() {
      this.$parent.closeEditpage()
      this.$router.push('/banner/banner') // 清除query data
    },
    getinformationList() {
      getinformationList().then(response => {
        this.informations = response.detail.data
      })
    },
    getcommodityList() {
      getcommodityList().then(response => {
        this.goods = response.detail.data
      })
    },
    bannerAdd() {
      const self = this
      const bannerid = self.editdata ? self.editdata.id : ''
      if (self.imageUrl == '') {
        self.$message({
          message: '请添加图片',
          type: 'warning'
        })
        return
      } else if (self.title == '') {
        self.$message({
          message: '请输入标题',
          type: 'warning'
        })
        return
      } else if (self.radio == '') {
        self.$message({
          message: '请选择链接地址',
          type: 'warning'
        })
        return
      }
      if (self.radio == 2 && self.chooseinforma == '') {
        self.$message({
          message: '请选择资讯链接地址',
          type: 'warning'
        })
        return
      } else if (self.radio == 3 && self.choosegoods == '') {
        self.$message({
          message: '请选择商品链接地址',
          type: 'warning'
        })
        return
      } else if (self.radio == 4 && self.link == '') {
        self.$message({
          message: '请输入自定义链接地址',
          type: 'warning'
        })
        return
      }
      const params = {
        frames: 1,
        informationid: self.radio === 2 ? self.chooseinforma : '',
        commodityid: self.radio === 3 ? self.choosegoods : '',
        link: self.radio === 4 ? self.link : '',
        files: self.imgFile,
        bannerid: bannerid,
        title: self.title,
      }
      if (this.editdata) {
        bannerEdit(params).then(response => {
          self.$message({
            message: '操作成功',
            type: 'success'
          })
          self.closePage()
          this.$parent.getData()
        })
      } else {
        bannerAdd(params).then(response => {
          self.$message({
            message: '操作成功',
            type: 'success'
          })
          self.closePage()
          this.$parent.getData()
        })
      }
    },
    informationClick(e) {
      this.chooseinforma = e
    },
    goodsClick(e) {
      this.choosegoods = e
    }
  }
}
</script>
<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
<style lang="less" scoped>
.padding_20{
	padding: 20px;
}
.must_icon{
	color: #fff;
	background: #FF4D51;
	padding: 4px;
	font-size: 12px;
}
.banner_edit{
	border: 1px solid #ccc;
	background: #fff;
}
.page_top{
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}
.page_content_tit{
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}
.page_foot{
	border-top: 1px solid #ccc;
	display: flex;
	justify-content: flex-end;
}
.ad_item{
	display: flex;
	margin-bottom: 10px;
}

</style>
